<template>
  <div class="basic-page">
    <!-- 表单区域 -->
    <el-form :model="form" ref="formRef" label-width="80px" class="form-area">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"/>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" placeholder="请输入年龄"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格展示区域 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="age" label="年龄"/>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      tableData: [
        {
          name: '陈国盛',
          age: 25
        }
      ]
    }
  },
  methods: {
    handleSubmit() {
      if (this.form.name == '' && this.form.age == '') {
        this.$message('请输入内容')
      } else {
        this.tableData.push(this.form)
        console.log(this.form)
      }
    },
    handleReset() {
      this.form = {name: '', age: ''}
    }
  }
}
</script>

<style scoped>
.basic-page {
  padding: 30px;
  max-width: 500px;
  margin: auto;
}

.form-area {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}
</style>